
// 费用弹框
<template>
  <div>
    <a-modal
      title="选择费用"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      :bodyStyle="{padding:'16px'}"
    >
      <a-input
        placeholder="请输入费用名称(回车搜索)"
        style="width:200px;margin-bottom:20px;"
        v-model="keywords"
        @pressEnter="reload()"
      >
        <a-tooltip slot="suffix" title="请输入搜索费用">
          <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="reload" />
        </a-tooltip>
      </a-input>
      <s-table
        ref="costTable"
        :columns="columns"
        :data="loadData"
        class="user_management_table"
        style="max-height:400px; overflow-y:auto"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :rowKey="(record) => record.id"
        :showPagination="false"
      ></s-table>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { costList } from '@/api/courseCharge'
export default {
  name: 'costModel',
  props: ['able'],
  components: {
    STable,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      selectedRowKeys: [],
      tableData: [],
      keywords: undefined,
      queryParam: {
        pageSize: 9999999999,
        school_id: this.$store.state.user.school,
        is_enable: this.able ? 1 : undefined,
      },
      columns: [
        {
          title: '费用名称',
          dataIndex: 'name',
          fixed: 'left',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '单价',
          dataIndex: 'unit_price',
          align: 'center', //  scopedSlots: { customRender: 'actions' },
        },
      ],
      loadData: (parameter) => {
        this.confirmLoading = true
        return costList(Object.assign(parameter, this.queryParam, { keywords: this.keywords })).then((res) => {
          this.tableData = JSON.parse(JSON.stringify(res.data))
          this.confirmLoading = false
          return res
        })
      },
    }
  },
  methods: {
    name() {},
    showModal() {
      this.visible = true
    },
    handleCancel(e) {
      this.visible = false
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    reload() {
      this.$refs.costTable.refresh()
    },
    handleOk() {
      if (this.selectedRowKeys.length > 0) {
        let data = []
        this.selectedRowKeys.forEach((val) => {
          this.tableData.forEach((item) => {
            if (val == item.id) {
              data.push(item)
            }
          })
        })
        this.visible = false
        this.$emit('receive', data)
      }
    },
  },
  created() {},
}
</script>